<template>
  <div>
    <el-table
      :data="tableData"
      :size="size"
      :width="width"
      :height="height"
      :max-height="maxHeight"
      :show-header="showHeader"
      :stripe="stripe"
      :border="border"
      :span-method="spanMethod"
      :summary-method="summaryMethod"
      :show-summary="showSummary"
    >
      <slot></slot>
    </el-table>
    <div class="show-limit-data-box" v-if="isShowLimit" @click="changeTableLimit">
      <template v-if="tableLimit">
        查看全部
      </template>
      <template v-else>
        隐藏部分
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReElTable',
  computed: {
    tableData(){
      if(this.showLimit && this.tableLimit){
        return this.data.slice(0,this.showLimitNum)
      }else{
        return this.data
      }
    },
    isShowLimit(){
      if(this.data.length <= this.showLimitNum){
        return false
      }
      return this.showLimit
    }
  },
  data(){
    return {
      tableLimit: true,
    }
  },
  methods: {
    changeTableLimit(){
      this.tableLimit = !this.tableLimit
    },
  },
  props: {
    // 自定义的 props
    showLimit: {
      type: Boolean,
      default: false,
    }, // 是否显示限制条数
    showLimitNum: {
      type: Number,
      default: 3,
    }, // 显示限制的条数 默认为3

    // 下面的都是el-table原来的 props
    data: {
      type: Array,
      default: function() {
        return [];
      }
    },

    size: String,

    width: [String, Number],

    height: [String, Number],

    maxHeight: [String, Number],

    fit: {
      type: Boolean,
      default: true
    },

    stripe: Boolean,

    border: Boolean,

    rowKey: [String, Function],

    context: {},

    showHeader: {
      type: Boolean,
      default: true
    },

    showSummary: Boolean,

    sumText: String,

    summaryMethod: Function,

    rowClassName: [String, Function],

    rowStyle: [Object, Function],

    cellClassName: [String, Function],

    cellStyle: [Object, Function],

    headerRowClassName: [String, Function],

    headerRowStyle: [Object, Function],

    headerCellClassName: [String, Function],

    headerCellStyle: [Object, Function],

    highlightCurrentRow: Boolean,

    currentRowKey: [String, Number],

    emptyText: String,

    expandRowKeys: Array,

    defaultExpandAll: Boolean,

    defaultSort: Object,

    tooltipEffect: String,

    spanMethod: Function,

    selectOnIndeterminate: {
      type: Boolean,
      default: true
    },

    indent: {
      type: Number,
      default: 16
    },

    treeProps: {
      type: Object,
      default() {
        return {
          hasChildren: 'hasChildren',
          children: 'children'
        };
      }
    },

    lazy: Boolean,

    load: Function
  },
}
</script>

<style scoped lang="scss">
.show-limit-data-box{
  border: #dfe6ec 1px solid;
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  color: rgb(64, 158, 255);
  font-weight: bold;
}
</style>
